<template>
  <div id="map">
    <div ref="container" id="mapContainer">
      <!-- 区块标识 -->
      <transition name="el-zoom-in-top">
        <AreaTip v-if="areaInfo" :areaInfo="areaInfo" :movePos="movePos" />
      </transition>
    </div>
    <!-- 楼层切换部分 -->
    <FloorChange v-if="floorData.length > 0" :floorData="floorData" />
    <!-- 搜索栏 -->
    <Search @select="move2Map" />
    <!-- shopInfo以及导航部分 -->
    <div class="shopInfo" v-if="isShowShopInfo">
      <div class="shopBanner" :style="{backgroundImage: `url(${shopInfo.banner})`}"></div>
      <div class="shopLabel">
        <div class="top">
          <div class="logo" :style="{backgroundImage: `url(${shopInfo.logo})`}"></div>
          <div class="info">
            <div>{{shopInfo.name}}</div>
            <div>{{shopInfo.floorName}}</div>
            <div>8888-8888</div>
          </div>
        </div>
        <div
          class="label"
        >自1854年以来，代代相传至今的路易威登，以卓越品质、杰出创意和精湛工艺成为时尚旅行艺术的象征 。产品包括手提包，旅行用品，小型皮具，配饰，鞋履，成衣，腕表，高级珠宝及个性化订制服务等。</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { config } from "../../assets/config/mapConfig.js";
import FloorChange from "../../components/floorChange";
import Search from "../../components/search";
import AreaTip from "../../components/areaTip";
export default {
  props: {},
  data() {
    return {
      // 地图初始化配置
      config: {
        isJavaServer: true,
        debug: false,
        initCompleted: this.initCompleted, //初始化完成之后的调用函数
        onSelected: this.onSelected, //当区块被选中时触发
        enabledControl: true, //是否启用手势操作
        container: "", //包装的div
        backgroundColor: 0xffffff, //地图背景颜色
        compassOffset: [10, 10, 0, 40], //指南针的位置和角度
        showLabelType: "shopName", //默认显示店铺号，可以选
        crossBuild: false, //是否跨建筑
        labelScale: 1.5, //文本缩放值
        projectID: "71",
        buildingID: "",
        initFloorID: "",
        backgroundAlpha: true, //地图背景色透明
        logoFiled: "Logo",
        accessToken: "BAF3CB32-E8F2-40A6-AE1A-A5BFE2CB6E14", //key 暂时不需要配置
        cloudID: "142D0800-9622-4A0B-BCA6-80673095FF5B",
        themeID: "1003", //地图主题文件夹ID号 String类型
        preCreation: false, //是否后台静默渲染 默认为true
        opacity: 1, //块的透明度
        groundLayer: true, //是否设置地图底图 布尔值
        bgisSvg: false, // 底图是否是svg  布尔值
        isVue: true, //框架下需要填true
        showLabelLength: "5000", //显示文字的半径
        showImageLength: "8000", //显示公共设施的半径
        server: "https://openapi.cloudindoormap.com:8085/map/", //接口服务地址
        showIDSDevice: true //显示ids设备点位
      },
      // 搜索结果数组
      searchResult: [],
      // 楼层数组
      floorData: [],
      // 店铺信息
      shopInfo: {},
      // 是否显示店铺详情方块
      isShowShopInfo: false,
      // 店铺详情方块信息
      areaInfo: null,
      // 移动的区块3D转2D标记的标识
      moveID: "",
      // 移动距离
      movePos: null,
      // 地图相关参数
      mapConfig: {
        // 楼层ID与楼层名映射数组
        allFloorName: {},
        // 楼层名与楼层order映射数组
        floorOrder: {}
      }
    };
  },
  computed: {
    // 监听路由参数中的nodeID变化
    updateRouteNodeId() {
      return this.$route.params.nodeId;
    },
    // 监听路由名变化
    updateRouteName() {
      return this.$route.name;
    }
  },
  created() {},
  mounted() {
    // 初始化地图
    this.initMap();
  },
  watch: {
    // 跳转路由nodeID存在的情况直接地图选中该区块
    updateRouteNodeId(nodeID) {
      nodeID && map.selectByID(nodeID, true);
    },
    // 跳转路由不是Map路由的情况下直接重置地图
    updateRouteName(newRoute) {
      newRoute !== "Map" && this.resetMap();
    }
  },
  methods: {
    ...mapMutations("home", ["getMapConfig"]),
    // 初始化地图
    initMap() {
      this.config.container = this.$refs.container;
      window.map = new GIM.Map3D(this.config); // 初始化地图
      map.showCompass(false);
      map.defaultCenterPoint = {
        x: 2500,
        y: -2500
      };
      map.pathThickness = 15;
      map.maxCameraRadius = 15000;
      map.minCameraRadius = 500;
      map.cameraRadius = 8000;
      map.selectedColor = 0x7f87c2;
      map.setAzimuthalAngle(0);
      map.setPolarAngle(30);
      map.regCompassChange(angel => {
        this.compassAngle = angel;
      });
    },
    // 地图加载完成回调函数
    initCompleted(mapData) {
      map.startPID = config.POSITION_NODEID;
      let nowAtFloor;

      // 拿到隐射对象
      mapData.forEach(t => {
        this.mapConfig.allFloorName[t.FloorID] = t.Name;
        this.mapConfig.floorOrder[t.Name] = t.Order;
        t.Area.forEach(data => {
          if (data.PI === config.POSITION_NODEID) {
            nowAtFloor = data.FloorID;
          }
        });
      });

      mapData.forEach(floor => {
        // 筛选楼层信息数组
        this.floorData.push({
          floorID: floor.FloorID,
          name: floor.Name,
          order: floor.Order,
          isActive: floor.FloorID === GIM.INIT_FLOORID,
          isPositionFloor: floor.FloorID === nowAtFloor
        });
      });

      // 给全局vuex赋值mapConfig
      this.getMapConfig(this.mapConfig);

      // 楼层信息数组翻转（看项目是否必须）
      this.floorData = this.floorData.reverse();

      map.regMarkerLocate(pinLocate => {
        this.movePos = pinLocate[this.moveID];
      });

    },
    // 地图点击事件
    onSelected(selArea) {
      const { logo, shopName, name } = selArea;
      if (logo && shopName && name) {
        this.areaInfo = this.shopInfo = {
          name: shopName,
          floorName: name,
          logo: `https://openapi.cloudindoormap.com:8085/${logo}`
        };
        this.isShowShopInfo = true;

        this.moveID = selArea.nodeId;
        // 标记该点击区块的移动
        map.regMarker(
          selArea.nodeId,
          selArea.floorID,
          selArea.nodePosition.x,
          Math.abs(selArea.nodePosition.y),
          0
        );
      } else {
        this.isShowShopInfo = false;
        this.areaInfo = null;
      }

      // map.endPID = selArea.nodeId;
      // if (map.startPID && map.endPID) {
      //   setTimeout(() => {
      //     map.searchPath(msg => {
      //       console.log("msg", msg);
      //     });
      //   }, 1000);
      // }
    },
    // 重置地图
    resetMap() {
      map.setPolarAngle(30);
      map.setAzimuthalAngle(0);
      map.cameraRadius = 8000;
      map.defaultCenterPoint = {
        x: 2500,
        y: -2500
      };
      // 清除标记
      map.cleanSelectUnit3D();
      // 清除路径
      map.clearPath(true);
      this.isShowShopInfo = false;
      this.areaInfo = null;

      map.startPID = config.POSITION_NODEID;
    },
    // 跳转地图
    move2Map(node) {
      map.selectByID(node.PointID, true);
    }
  },
  components: { FloorChange, Search, AreaTip }
};
</script>

<style scoped lang='less'>
#map {
  width: 100%;
  height: 100%;
  #mapContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
  }
  .shopInfo {
    position: absolute;
    top: 65px;
    right: 50px;
    width: 720px;
    height: 284px;
    background-color: #ffffff;
    border-radius: 0px 87px 0px 0px;
    display: flex;
    align-items: center;
    justify-items: center;
    .shopBanner {
      margin-left: 20px;
      margin-right: 20px;
      width: 320px;
      height: 245px;
    }
    .shopLabel {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      .top {
        width: 100%;
        height: 125px;
        border-bottom: 1px dashed #8d6518;
        display: flex;
        align-items: center;
        .logo {
          width: 100px;
          height: 100px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }
        .info {
          margin-left: 20px;
          flex: 1;
          div {
            color: #8d6518;
            height: 23px;
            font-size: 18px;
            line-height: 23px;
            margin-top: 10px;
            &:nth-child(1) {
              height: 33px;
              font-size: 26px;
              line-height: 33px;
              margin-top: 0px;
            }
          }
        }
      }
      .label {
        flex: 1;
        font-size: 16px;
        line-height: 32px;
        color: #8d6518;
      }
    }
  }
}
</style>
